<template>
  <div>
    <input ref="excel-docx-input" class="excel-docx-input" type="file" accept=".docx" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      导入未加密的Docx拖拽到这 或者
      <el-button :loading="loading" style="margin-left:16px;" size="small" type="primary" class="pan-btn primary-btn" @click="handleUpload">
        选择文件并上传
      </el-button>
    </div>
  </div>
</template>

<script>

  import axios from "axios";

	import {CODE_OK} from '@/common/js/config'

  import {
    uploadDocx
  } from '@/api/print'

export default {
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function// eslint-disable-line
  },
  data() {
    return {
      loading: false
    }
  },
  props: ["fileInfo"],
  methods: {
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message.error('只支持单个文件上传')
        return
      }
      const rawFile = files[0] // only use files[0]

      if (!this.isExcel(rawFile)) {
        this.$message.error('只支持 .docx 文件')
        return false
      }

      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },
    handleUpload() {
      this.$refs['excel-docx-input'].click()
    },
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.upload(rawFile)
    },
    upload(rawFile) {
      this.loading = true;
      let fd = new FormData();
        fd.append("file",rawFile);
        fd.append("clazz",this.fileInfo.clazz)
        fd.append("reMark",this.fileInfo.reMark)
        axios.post("/api/print/uploadFile",fd).then(res=>{
          if (res.data.code === CODE_OK) {
            this.loading = false;
          	this.$message({
          	  message: '上传成功',
          	  type: 'success',
          	  duration: 3000
          	})
          }else{
          	this.$message.error(res.msg)
          }
        });
    },
    isExcel(file) {
      return /\.(docx)$/.test(file.name)
    }
  }
}
</script>

<style scoped>
.excel-upload-input{
  display: none;
  z-index: -9999;
}
.drop{
  border: 2px dashed #bbb;
  width: 600px;
  height: 160px;
  line-height: 160px;
  margin: 0 auto;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
}
</style>
